<template>
  <transition 
    :enter-active-class="enterActive" 
    :leave-active-class="leaveActive">
    <div class="able-popup" :style="popType" v-if="isShow" @click="closeSelf">
      <div class="slot" @click.stop="" :style="isTrue(width)?'width:'+width+'%':'width:auto'"><slot></slot></div>
    </div>
  </transition>
  <transition 
    :duration="{ enter: 0, leave: 500 }" 
    enter-active-class="animate__animated animate__fadeIn animate__faster" 
    leave-active-class="animate__animated animate__fadeOut animate__faster">
    <div class="able-popup-bg" v-if="isShow" @click="closeSelf"></div>
  </transition>
</template>

<script>
import { ref } from '@vue/reactivity'
import { onMounted, onUpdated } from '@vue/runtime-core'
export default {
  props: ['type','maskClose','animation','width'],
  setup(props) {
    let isShow = ref(false)
    let enterActive = ref('animation-zoomIn')
    let leaveActive = ref('animation-zoomOut')
    let popType = ref('')
    let width = ref('')

    function init() {
      let t = props.type || ''
      // console.log(t)
      if (t == 'default') {
        enterActive.value = 'animation-zoomIn'
        leaveActive.value = 'animation-zoomOut'
        popType.value = ''
      }
      if (t == 'top') {
        enterActive.value = 'animation-slideInDown5'
        leaveActive.value = 'animation-slideOutUp5'
        popType.value = 'display:flex;align-items: flex-start;'
      }
      if (t == 'bottom') {
        enterActive.value = 'animation-slideInUp5'
        leaveActive.value = 'animation-slideOutDown5'
        popType.value = 'display:flex;align-items: flex-end;'
      }
      if (t == 'left') {
        enterActive.value = 'animation-slideInLeft5'
        leaveActive.value = 'animation-slideOutLeft5'
        popType.value = 'display:flex;justify-content: flex-start;'
      }
      if (t == 'right') {
        enterActive.value = 'animation-slideInRight5'
        leaveActive.value = 'animation-slideOutRight5'
        popType.value = 'display:flex;justify-content: flex-end;'
      }
      if (t == 'custom' && isTrue(props.animation)) {
        enterActive.value = props.animation.enter || enterActive.value
        leaveActive.value = props.animation.leave || leaveActive.value
        popType.value = ''
      }
      width.value = props.width
    }

    function open() {
      isShow.value = true
    }

    function close() {
      isShow.value = false
    }

    function closeSelf() {
      if (props.maskClose) isShow.value = false
    }

    onMounted(()=>{
      init()
    })

    onUpdated(()=>{
      init()
    })

    function isTrue(v) {
      if (typeof(v) == 'string') v = true
      if (typeof(v) == 'undefined') v = false
      return v
    }

    return{
      isShow, enterActive, leaveActive, popType, width,
      open, close, closeSelf, isTrue
    }
  },
}
</script>

<style lang="scss" scoped>
.able-popup{
  width:100%;height:calc(100vh);
  display: flex;
  align-items: center;
  justify-content: center;  
  position: fixed;
  left:0;top:0;
  z-index: 9;
  background-color: rgba(0,0,0,0);
  .slot{
    width: auto;
  }
}
.able-popup-bg{
  display: block;
  width: 100%;height: calc(100vh);
  position: fixed;
  top:0;left:0;
  background-color: $color-modal-bg;
  z-index: 8;
}
</style>